<template>
	<xn-form-container title="案件分配" :width="500" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-card :bordered="false">
			<a-space>
				<a-input-search
					v-model:value="searchFormState.searchKey"
					placeholder="请输入员工姓名"
					enter-button
					allowClear
					@search="() => tableRef.refresh(true)"
				/>
			</a-space>
		</a-card>
		<s-table
			ref="tableRef"
			:columns="columns"
			:data="loadData"
			:row-key="(record) => record.id"
			:row-selection="{ type: 'radio', ...rowSelection }"
			:scroll="{ x: 'max-content' }"
			:size="5"
			:pageSizeOptions="['5', '10', '20']"
		>
		</s-table>
		<template #footer>
			<a-button class="xn-mr8" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup>
	import userApi from '@/api/sys/userApi'
	import { Modal } from 'ant-design-vue'
	import allocateApi from '@/api/tjzy/allocate/allocateApi'
	// 默认是关闭状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })

	const tableRef = ref()
	const searchFormState = ref({
		searchKey: undefined
	})
	const selectedRow = ref()
	const caseIdList = ref([])
	const rowSelection = {
		onChange: (selectedRowKey, selectedRows) => {
			selectedRow.value = selectedRows[0]
		}
	}
	// 打开抽屉
	const onOpen = (caseIdArr) => {
		if (caseIdArr.length === 0) {
			Modal.error({
				title: '提示：',
				okText: '确定',
				content: '尚未选择案件',
				onOk: () => {}
			})
			return
		}
		visible.value = true
		caseIdList.value = caseIdArr
	}
	// 关闭抽屉
	const onClose = () => {
		visible.value = false
	}
	const columns = [
		{
			title: '姓名',
			dataIndex: 'name'
		},
		{
			title: '性别',
			dataIndex: 'genderName'
		},
		{
			title: '所属公司',
			dataIndex: 'orgName'
		}
	]
	const loadData = (parameter) => {
		parameter.searchKey = searchFormState.value.searchKey
		return userApi.userPage(parameter).then((res) => {
			return res
		})
	}

	const onSubmit = () => {
		visible.value = false
		allocateApi
			.updateCaseMediator({
				caseIdList: caseIdList.value,
				userName: selectedRow.value.account
			})
			.then((res) => {
				emit('successful')
			})
	}

	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>
